import 'package:cbec_app/components/base/base_badges.dart';
import 'package:cbec_app/components/base/base_icon.dart';
import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/routes/routes.dart';
import 'package:cbec_app/utils/AppData.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

///店铺装修-顶部导航
class DecorationTopNavBar extends StatefulWidget {
  ///顶部导航配置
  final Map<String, dynamic>? info;

  const DecorationTopNavBar({super.key, this.info});

  @override
  State<StatefulWidget> createState() {
    return _DecorationTopNavBarState();
  }
}

class _DecorationTopNavBarState extends State<DecorationTopNavBar> {
  FocusNode focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    focusNode.unfocus();
    // widget.info!['title_position'] == 'center';
  }

  @override
  Widget build(BuildContext context) {
    // search_box

    if (widget.info == null) {
      return const SizedBox();
    }

    final customColor = widget.info?['style_color_custom_background_color'];

    if (widget.info!['search_box'] == '1') {
      double borderStyleHeight = double.parse(widget.info!['border_style_height'].toString());
      return Container(
        width: double.infinity,
        height: 44 + borderStyleHeight,
        color: customColor != null ? Tools.fromHex(customColor) : Colors.transparent,
        child: Column(
          children: [
            Container(
              width: double.infinity,
              height: 44,
              color: customColor != null ? Tools.fromHex(customColor) : Colors.transparent,
              // color: Colors.red,
              child: Stack(
                children: [
                  //搜索框
                  (widget.info != null && widget.info!['search_switch'] == '1') ? searchInput() : emptyWidget(),
                  //标题
                  (widget.info != null && widget.info!['title_switch'] == '1') ? titleStyle() : emptyWidget(),
                  //消息按钮
                  // msgIcon()

                  serviceIcon(),
                  notifyIcon()
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: borderStyleHeight,
              color: customColor != null ? Tools.fromHex(customColor) : Colors.transparent,
              child: searchBottomInput(),
            )
          ],
        ),
      );
    } else {
      return Container(
        width: double.infinity,
        height: 44,
        color: customColor != null ? Tools.fromHex(customColor) : Colors.transparent,
        // color: Colors.red,
        child: Stack(
          children: [
            //搜索框
            (widget.info != null && widget.info!['search_switch'] == '1') ? searchInput() : emptyWidget(),
            //标题
            (widget.info != null && widget.info!['title_switch'] == '1') ? titleStyle() : emptyWidget(),
            //消息按钮
            // msgIcon()

            serviceIcon()
          ],
        ),
      );
    }
  }

  ///标题样式
  Widget titleStyle() {
    switch (widget.info!['title_content_type']) {
      case 'image': //图片
        return Positioned(
            bottom: 0,
            left: getLeft(),
            child: Container(
              width: getTitleWidth(),
              alignment: widget.info!['title_position'] == 'left' ? Alignment.centerLeft : Alignment.center,
              padding: const EdgeInsets.only(left: 8),
              height: 44,
              child: BaseImage(
                url: widget.info!['title_image_url'] != '' ? widget.info!['title_image_url'] : 'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
                width: 100.w,
                fit: BoxFit.fitHeight,
              ),
            ));
      case 'text': //文本
      default:
        return Positioned(
            left: getLeft(),
            bottom: 10,
            child: Container(
              width: getTitleWidth(),
              alignment: Alignment.center,
              child: Padding(
                padding: const EdgeInsets.only(bottom: 0),
                child: Text(
                  widget.info!['title'] ?? '',
                  style: setTextStyle(
                    17,
                    FontWeight.normal,
                    getTitleColor(),
                  ),
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                ),
              ),
            ));
    }
  }

  ///获取标题颜色
  Color getTitleColor() {
    if (widget.info!['style_color_custom_font_color'] == 'black') {
      return Colors.black;
    } else {
      return Colors.white;
    }
  }

  ///获取标题宽度
  double getTitleWidth() {
    if (widget.info!['title_position'] == 'left') {
      //居左
      return 120.w;
    } else {
      if (widget.info!['search_switch'] == '1') {
        //居中
        return 103.w;
      } else {
        return 179.w;
      }
    }
  }

  ///获取标题位置
  double getLeft() {
    if (widget.info!['title_position'] == 'left') {
      return 0;
    } else {
      if (widget.info!['search_switch'] == '1') {
        return 136.w;
      } else {
        return 98.w;
      }
    }
  }

  ///消息按钮
  Widget msgIcon() {
    return Positioned(
        top: 15.h,
        right: 5,
        child: BaseInteractive(
          childWidget: const SizedBox(
              child: BaseBadges(
            num: 16,
            child: BaseIcon(
              url: 'msg.png',
              color: Colors.red,
            ),
          )),
          onClick: () {
            Get.toNamed(Routes.login);
          },
        ));
  }

  Widget serviceIcon() {
    return Positioned(
        top: 0,
        right: 15,
        bottom: 0,
        child: BaseInteractive(
          childWidget: const SizedBox(
              child: BaseIcon(
            url: 'customer.png',
            size: 24,
            color: Colors.white, // getTitleColor(),
          )),
          onClick: () {
            Get.toNamed(Routes.serviceSupportPage);
          },
        ));
  }

  Widget notifyIcon() {
    return Positioned(
        top: 0,
        right: 50,
        bottom: 0,
        child: BaseInteractive(
          childWidget: const SizedBox(
              child: BaseIcon(
            url: 'notice.png',
            size: 24,
            color: Colors.white, // getTitleColor(),
          )),
          onClick: () {
            if (AppData.isLogin) {
              Get.toNamed(Routes.noticePage);
            } else {
              Get.toNamed(Routes.login);
            }
          },
        ));
  }

  ///搜索框
  Widget searchInput() {
    return Positioned(
        bottom: 5,
        left: widget.info!['title_position'] == 'left' ? 136.w : 5,
        child: Container(
          width: 120.w,
          height: 32,
          decoration: const BoxDecoration(
            color: Color(0xfff6f6f6),
            borderRadius: BorderRadius.all(Radius.circular(50)),
          ),
          child: CupertinoTextField(
            focusNode: focusNode,
            prefix: const Padding(
              padding: EdgeInsets.only(left: 5),
              child: Icon(
                Icons.search,
                color: Color(0xff969799),
              ),
            ),
            placeholder: '搜索',
            placeholderStyle: const TextStyle(fontSize: 12, color: Color(0xff969799)),
            decoration: inputStyle(),
            style: const TextStyle(fontSize: 12),
            onTap: () {
              focusNode.unfocus();
              Get.toNamed(Routes.search);
            },
          ),
        ));
  }
}

Widget searchBottomInput() {
  return Container(
    margin: const EdgeInsets.symmetric(horizontal: 8),
    decoration: const BoxDecoration(
      color: Color(0xfff6f6f6),
      borderRadius: BorderRadius.all(Radius.circular(50)),
    ),
    child: Stack(
      children: [
        CupertinoTextField(
          enabled: false, // 输入框不可用
          prefix: Padding(
            padding: const EdgeInsets.only(left: 5),
            child: Row(
              children: [
                const Icon(
                  Icons.search,
                  size: 20,
                  color: Color(0xff969799),
                ),
                Text('搜索商品', style: TextStyle(fontSize: 14, color: Tools.fromHex('#969799'))),
              ],
            ),
          ),
          suffix: Padding(
            padding: const EdgeInsets.only(right: 2), // 控制右侧按钮与边框的间距
            child: GestureDetector(
              onTap: () {
                print("Search button clicked!");
                Get.toNamed(Routes.search); // 跳转搜索页面
              },
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
                decoration: BoxDecoration(
                  color: Colors.red, // 背景颜色红色
                  borderRadius: BorderRadius.circular(15), // 圆角
                ),
                child: const Text(
                  '搜索',
                  style: TextStyle(
                    color: Colors.white, // 字体颜色白色
                    fontSize: 12, // 字体大小
                  ),
                ),
              ),
            ),
          ),
          // placeholder: '搜索商品',
          placeholderStyle: const TextStyle(fontSize: 12, color: Color(0xff969799)),
          decoration: inputStyle(),
          style: const TextStyle(fontSize: 12),
        ),
        Positioned.fill(
          child: GestureDetector(
            onTap: () {
              // 点击整个搜索框区域触发跳转
              Get.toNamed(Routes.search);
            },
            child: Container(
              color: Colors.transparent, // 透明层
            ),
          ),
        ),
      ],
    ),
  );
}
